<template>
  <div class="wrapper">
    <JForm :form-config="dynamicValidateForm" :read="read" @handleBoxEvent="handleBoxEvent" />
  </div>
</template>

<script>
import JForm from '@/components/JForm'
export default {
  name: 'TenantCreated',
  components: { JForm },
  props: {
    emitData: {
      type: Array,
      default: () => ([])
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const userInfo = [
      {
        name: 'accountNumber',
        label: '账号额度',
        type: 'string',
        required: true,
        span: 24,
        placeholder: ''
      },
      {
        name: 'expireTime',
        label: '过期时间',
        type: 'string',
        required: true,
        span: 24,
        placeholder: ''
      }
    ]
    return {
      userInfo,
      formData: {}
    }
  },
  computed: {
    dynamicValidateForm() {
      const data = this.userInfo
      const result = []
      data.forEach(i => {
        result.push(i)
      })
      if (this.formData) {
        result.forEach(i => {
          const { name } = i
          i.value = this.formData[name]
        })
      }
      return result
    }
  },
  watch: {
    emitData: {
      handler: function(newval) {
        if (newval) {
          this.formData = newval[0]
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleBoxEvent(target) {
      this.$emit('handleBoxEvent', { target })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
